<template>
  <div class="p-20px">
    <el-card>
      <el-row type="flex" justify="end">
        <el-col :span="20">
          <el-form inline :model="query">
            <el-form-item>
              <el-input v-model="query.title" placeholder="根据权限名搜索" />
            </el-form-item>
            <el-form-item>
              <el-button class="mr-10px" type="default" @click="onClear">
                {{ $t('manage.permission.query.clear') }}
              </el-button>
              <el-button type="primary" @click="onSearch">
                {{ $t('manage.permission.query.search') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" size="default" :icon="Edit" @click="isShowDialog = true">
              {{ $t('manage.permission.add') }}
            </el-button>
          </el-row>
        </el-col>
      </el-row>

      <el-alert :title="`共 ${total} 条记录`" type="info" show-icon :closable="false" />

      <el-table v-loading="isLoading" :data="list" style="width: 100%;" class="mt-10px mb-15px">
        <el-table-column type="index" width="80" />
        <el-table-column prop="title" label="权限组名" />
        <el-table-column prop="create_date" label="日期">
          <template #default="{row}">
            {{ dayjs(row.create_date).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button type="primary" :icon="Edit" circle @click="openEdit(row.id)" />
            <el-button type="danger" :icon="Delete" circle @click="delPerm(row.id)" />
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          v-model:current-page="query.page"
          v-model:page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40]"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { reactive, watch } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { getPermissionList } from '@/api/permission'
import { PermissionQuery, IPermissionItem } from '@/api/permission/types'

const isLoading = ref(false)
const total = ref(0)
const list = ref<IPermissionItem[]>([])
const query = reactive<PermissionQuery>({
  title: '',
  page: 1,
  pagesize: 10
})

function onSearch() {
  isLoading.value = true
  getPermissionList(query)
    .then(data => {
      total.value = data.data.counts
      list.value = data.data.list
      isLoading.value = false
    })
    .catch(e => {
      ElMessage.error(e.message || '获取列表失败')
      isLoading.value = false
    })
}

function onClear() {
  query.title = ''
  onSearch()
}

onSearch()

watch([() => query.page, () => query.pagesize], onSearch)

async function delPerm(id: number) {
  ElMessage({ message: 'id: ' + id + ' 时间关系, 暂时空着', type: 'warning' })
}

// === 编辑 新增
const isShowDialog = ref(false)
const permId = ref<number>()

async function openEdit(id: number) {
  permId.value = id
  isShowDialog.value = true
  ElMessage({ message: 'id: ' + id + ' 时间关系, 暂时空着', type: 'warning' })
}
</script>
